<%--
  Created by IntelliJ IDEA.
  User: yajuan.wang
  Date: 2019/1/7
  Time: 15:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<jsp:include page="/pages/sysIndex/default.jsp"/>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>


<html>
<head>
    <title>Title</title>
    <style>
        ul > li {
            font-size: 16px;
        }

        .form-group .control-label {
            font-weight: normal;
            padding-top: 3px;
            text-align: left;
            padding-right: 0;
        }

        .status {
            color: red;
        }

        .row-base-info {
            /*margin-top: 10px;*/
            margin-left: 10px;
            margin-right: 10px;
        }

        .panel-success > .panel-heading {
            background-color: #1c84c6;
            border-color: #1c84c6;
            color: #ffffff;
        }

        .panel-success {
            border-color: #1c84c6;
            margin-top: 20px;
        }
        table{
            margin-right: 10px;
        }
        #gbox_applyOrderRecord{
            width: auto!important;
        }

        #gbox_maintainDate{
            width: auto!important;
        }
        #gbox_auditOrderRecord{
            width: auto!important;
        }
        #gbox_facilityMaintain{
            width: auto!important;
        }
    </style>
</head>
<body>

<div class="main-content">
    <div class="box box-main">
        <div class="box-body">
            <div class="nav-tabs-custom">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#tab_1_1" data-toggle="tab" aria-expanded="true">基础信息</a></li>
                    <li class=""><a href="#tab_1_2" data-toggle="tab" aria-expanded="false">申请审核信息</a></li>
                    <li class=""><a href="#tab_1_3" data-toggle="tab" aria-expanded="false">维保内容详情</a></li>
                    <li class=""><a href="#tab_1_4" data-toggle="tab" aria-expanded="false">工艺工作要求</a></li>
                    <li><a><span class="status">${status}</span></a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="tab_1_1">
                        <%--<div class="form-unit">基础信息</div>--%>
                        <div class="row">
                            <div class="col-xs-12">
                                <div class="panel panel-success">
                                    <div class="panel-heading" onclick="hiddenthis()">
                                        基础信息
                                    </div>
                                    <div class="panel-body">
                                        <div class="row row-base-info">
                                            <div class="col-xs-4">
                                                <div class="form-group">
                                                    <label class="control-label col-sm-4" title="">
                                                        工单号：<i class="fa icon-question hide"></i></label>
                                                    <div class="col-sm-8">
                                                        <label class="control-label col-sm-8" title="">
                                                            ${maintainOrder.orderCode}</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-xs-4">
                                                <div class="form-group">
                                                    <label class="control-label col-sm-4" title="">
                                                        工单名称：<i class="fa icon-question hide"></i></label>
                                                    <div class="col-sm-8">
                                                        <label class="control-label col-sm-8" title="">
                                                            ${maintainOrder.orderName}</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-xs-4">
                                                <div class="form-group">
                                                    <label class="control-label col-sm-4" title="">
                                                        工单类型：<i class="fa icon-question hide"></i></label>
                                                    <div class="col-sm-8">
                                                        <label class="control-label col-sm-8" title="">
                                                            ${maintainOrder.orderType?"一次性":"周期性"}</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-xs-4">
                                                <div class="form-group">
                                                    <label class="control-label col-sm-4" title="">
                                                        紧急程度：<i class="fa icon-question hide"></i></label>
                                                    <div class="col-sm-8">
                                                        <label class="control-label col-sm-8" title="">
                                                            ${maintainOrder.degree}</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-xs-4">
                                                <div class="form-group">
                                                    <label class="control-label col-sm-4" title="">
                                                        标准工分：<i class="fa icon-question hide"></i></label>
                                                    <div class="col-sm-8">
                                                        <label class="control-label col-sm-8" title="">
                                                            ${maintainOrder.points}</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-xs-4">
                                                <div class="form-group">
                                                    <label class="control-label col-sm-4" title="">
                                                        维保类型：<i class="fa icon-question hide"></i></label>
                                                    <div class="col-sm-8">
                                                        <label class="control-label col-sm-8" title="">
                                                            ${maintainOrder.type}</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-xs-4">
                                                <div class="form-group">
                                                    <label class="control-label col-sm-4" title="">
                                                        开始时间：<i class="fa icon-question hide"></i></label>
                                                    <div class="col-sm-8">
                                                        <label class="control-label col-sm-8" title="">
                                                            <fmt:formatDate value="${maintainOrder.startDateTime}" pattern="yyyy-MM-dd HH:mm:ss"/>
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-xs-4">
                                                <div class="form-group">
                                                    <label class="control-label col-sm-4" title="">
                                                        结束时间：<i class="fa icon-question hide"></i></label>
                                                    <div class="col-sm-8">
                                                        <label class="control-label col-sm-8" title="">
                                                            <fmt:formatDate value="${maintainOrder.endDateTime}" pattern="yyyy-MM-dd HH:mm:ss"/>
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-xs-4">
                                                <div class="form-group">
                                                    <label class="control-label col-sm-4" title="">
                                                        提醒时间：<i class="fa icon-question hide"></i></label>
                                                    <div class="col-sm-8">
                                                        <label class="control-label col-sm-8" title="">
                                                            <fmt:formatDate value="${maintainOrder.remindDateTime}" pattern="yyyy-MM-dd HH:mm:ss"/>
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="panel panel-success">
                                    <div class="panel-heading">
                                        指定信息
                                    </div>
                                    <div class="panel-body">

                                        <div class="row row-base-info">
                                            <div class="col-xs-4">
                                                <div class="form-group">
                                                    <label class="control-label col-sm-4" title="">
                                                        是否指派：<i class="fa icon-question hide"></i></label>
                                                    <div class="col-sm-8">
                                                        <label class="control-label col-sm-8" title="">
                                                            ${maintainOrder.assign?"是":"否"}</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-xs-4">
                                                <div class="form-group">
                                                    <label class="control-label col-sm-4" title="">
                                                        是否延期：<i class="fa icon-question hide"></i></label>
                                                    <div class="col-sm-8">
                                                        <label class="control-label col-sm-8" title="">
                                                            ${maintainOrder.delay?"是":"否"}</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-xs-4">
                                                <div class="form-group">
                                                    <label class="control-label col-sm-4" title="">
                                                        是否取消：<i class="fa icon-question hide"></i></label>
                                                    <div class="col-sm-8">
                                                        <label class="control-label col-sm-8" title="">
                                                            ${maintainOrder.cancel?"是":"否"}
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-xs-4">
                                                <div class="form-group">
                                                    <div class="form-group">
                                                        <label class="control-label col-sm-4" title="">
                                                            指定负责人：<i class="fa icon-question hide"></i></label>
                                                        <div class="col-sm-8">
                                                            <c:forEach items="${maintainOrder.assignUsers}"
                                                                       var="assignUser">
                                                                <span class="icon-user">${assignUser.userName}</span>
                                                            </c:forEach>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-xs-4">
                                                <div class="form-group">
                                                    <div class="form-group">
                                                        <label class="control-label col-sm-4" title="">
                                                            指定岗位：<i class="fa icon-question hide"></i></label>
                                                        <div class="col-sm-8">
                                                            <c:forEach items="${maintainOrder.assignPositions}"
                                                                       var="assignPosition">
                                                                <span class="icon-user">${assignPosition.name}</span>
                                                            </c:forEach>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-xs-4">
                                                <div class="form-group">
                                                    <div class="form-group">
                                                        <label class="control-label col-sm-4" title="">
                                                            添加参与人：<i class="fa icon-question hide"></i></label>
                                                        <div class="col-sm-8">
                                                            <c:forEach items="${maintainOrder.joinUsers}"
                                                                       var="presenceUser">
                                                                <span class="icon-user">${presenceUser.userName}</span>
                                                            </c:forEach>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row row-base-info">
                                            <div class="col-xs-12">
                                                <div class="form-group">
                                                    <label class="control-label col-sm-4" title="">
                                                        完成审批流：<i
                                                            class="fa icon-question hide"></i></label>
                                                    <div class="col-sm-9">
                                                        <c:forEach items="${completeFlow}" var="flows" varStatus="count">
                                                            <c:if test="${count.index>0}">
                                                                <li class="glyphicon glyphicon-arrow-right countSize"></li>
                                                            </c:if>
                                                            <p class="btn btn-default square"
                                                                    <c:if test="${count.index == maintainOrder.level-1 && maintainOrder.orderStatusEnum == 'IN_AUDITING'}">
                                                                        style="background-color: red"
                                                                    </c:if>
                                                            > ${flows.value}</p>
                                                        </c:forEach>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row row-base-info">
                                            <div class="col-xs-12">
                                                <div class="form-group">
                                                    <label class="control-label col-sm-4" title="">
                                                        延期审批流：<i
                                                            class="fa icon-question hide"></i></label>
                                                    <div class="col-sm-9">
                                                        <c:forEach items="${delayFlow}" var="flows" varStatus="count">
                                                            <c:if test="${count.index>0}">
                                                                <li class="glyphicon glyphicon-arrow-right countSize"></li>
                                                            </c:if>
                                                            <p class="btn btn-default square"
                                                                    <c:if test="${count.index == maintainOrder.level-1 && maintainOrder.orderStatusEnum == 'IN_AUDITING'}">
                                                                        style="background-color: red"
                                                                    </c:if>
                                                            > ${flows.value}</p>
                                                        </c:forEach>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row row-base-info">
                                            <div class="col-xs-12">
                                                <div class="form-group">
                                                    <label class="control-label col-sm-4" title="">
                                                        取消审批流：<i
                                                            class="fa icon-question hide"></i></label>
                                                    <div class="col-sm-9">
                                                        <c:forEach items="${cancelFlow}" var="flows" varStatus="count">
                                                            <c:if test="${count.index>0}">
                                                                <li class="glyphicon glyphicon-arrow-right countSize"></li>
                                                            </c:if>
                                                            <p class="btn btn-default square"
                                                                    <c:if test="${count.index == maintainOrder.level-1 && maintainOrder.orderStatusEnum == 'IN_AUDITING'}">
                                                                        style="background-color: red"
                                                                    </c:if>
                                                            > ${flows.value}</p>
                                                        </c:forEach>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="panel panel-success">
                                    <div class="panel-heading">
                                        完成情况
                                    </div>
                                    <div class="panel-body">
                                        <div class="row row-base-info">
                                            <div class="col-xs-4">
                                                <div class="form-group">
                                                    <label class="control-label col-sm-4" title="">
                                                        是否接单：<i class="fa icon-question hide"></i></label>
                                                    <div class="col-sm-8">
                                                        <label class="control-label col-sm-8" title="">
                                                            ${maintainOrder.receive?"是":"否"}</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-xs-4">
                                                <div class="form-group">
                                                    <label class="control-label col-sm-4" title="">
                                                        接单人：<i class="fa icon-question hide"></i></label>
                                                    <div class="col-sm-8">
                                                        <label class="control-label col-sm-8" title="">
                                                            ${maintainOrder.receiveUser.userName}</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-xs-4">
                                                <div class="form-group">
                                                    <label class="control-label col-sm-4" title="">
                                                        接单时间：<i class="fa icon-question hide"></i></label>
                                                    <div class="col-sm-8">
                                                        <label class="control-label col-sm-8" title="">
                                                            <fmt:formatDate value="${maintainOrder.receiveDate}" pattern="yyyy-MM-dd HH:mm:ss"/>
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-xs-4">
                                                <div class="form-group">
                                                    <label class="control-label col-sm-4" title="">
                                                        是否到场：<i class="fa icon-question hide"></i></label>
                                                    <div class="col-sm-8">
                                                        <label class="control-label col-sm-8" title="">
                                                            ${maintainOrder.presence?"是":"否"}</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-xs-4">
                                                <div class="form-group">
                                                    <label class="control-label col-sm-4" title="">
                                                        到场人：<i class="fa icon-question hide"></i></label>
                                                    <div class="col-sm-8">
                                                        <label class="control-label col-sm-8" title="">
                                                            ${maintainOrder.presenceUser.userName}</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-xs-4">
                                                <div class="form-group">
                                                    <label class="control-label col-sm-4" title="">
                                                        到场时间：<i class="fa icon-question hide"></i></label>
                                                    <div class="col-sm-8">
                                                        <label class="control-label col-sm-8" title="">
                                                            <fmt:formatDate value="${maintainOrder.presenceTime}" pattern="yyyy-MM-dd HH:mm:ss"/>
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-xs-4">
                                                <div class="form-group">
                                                    <label class="control-label col-sm-4" title="">
                                                        是否完成：<i class="fa icon-question hide"></i></label>
                                                    <div class="col-sm-8">
                                                        <label class="control-label col-sm-8" title="">
                                                            ${maintainOrder.complete?"是":"否"}</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-xs-4">
                                                <div class="form-group">
                                                    <label class="control-label col-sm-4" title="">
                                                        完成人：<i class="fa icon-question hide"></i></label>
                                                    <div class="col-sm-8">
                                                        <label class="control-label col-sm-8" title="">
                                                            ${maintainOrder.completeUser.userName}</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-xs-4">
                                                <div class="form-group">
                                                    <label class="control-label col-sm-4" title="">
                                                        完成时间：<i class="fa icon-question hide"></i></label>
                                                    <div class="col-sm-8">
                                                        <label class="control-label col-sm-8" title="">
                                                            <fmt:formatDate value="${maintainOrder.finishTime}" pattern="yyyy-MM-dd HH:mm:ss"/>
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="tab_1_2">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="panel panel-success">
                                    <div class="panel-heading">
                                        申请信息
                                    </div>
                                    <div class="panel-body">
                                        <div class="row row-base-info">
                                            <table id="applyOrderRecord"></table>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="panel panel-success">
                                    <div class="panel-heading">
                                        审核信息
                                    </div>
                                    <div class="panel-body">
                                        <div class="row row-base-info">
                                            <table id="auditOrderRecord"></table>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="tab_1_3">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="panel panel-success">
                                    <div class="panel-heading">
                                        维保内容详情
                                    </div>
                                    <div class="panel-body">
                                        <div class="row row-base-info">
                                            <table id="maintainDate"></table>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="tab_1_4">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="panel panel-success">
                                    <div class="panel-heading">
                                        安全要求
                                    </div>
                                    <div class="panel-body">
                                        <div class="row row-base-info">
                                    <textarea  style="border: 0" name="required" rows="4" maxlength="200"
                                              class="form-control">${maintainOrder.required}</textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="panel panel-success">
                                    <div class="panel-heading">
                                        设备工艺信息
                                    </div>
                                    <div class="panel-body">
                                        <div class="row row-base-info">
                                            <table id="facilityMaintain"></table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
<script>
    $(function () {
        $(window).resize(function () {
            $("#applyOrderRecord").setGridWidth($(window).width() * 0.95);
            $("#applyOrderRecord").setGridWidth(document.body.clientWidth * 0.95);

            $("#auditOrderRecord").setGridWidth($(window).width() * 0.95);
            $("#auditOrderRecord").setGridWidth(document.body.clientWidth * 0.95);

            $("#maintainDate").setGridWidth($(window).width() * 0.95);
            $("#maintainDate").setGridWidth(document.body.clientWidth * 0.95);

            $("#facilityMaintain").setGridWidth($(window).width() * 0.95);
            $("#facilityMaintain").setGridWidth(document.body.clientWidth * 0.95);
        });
    });
    $(document).ready(function () {
        $("#applyOrderRecord").jqGrid({
            url: "<c:url value="/web/admin/maintainOrder/applyOrderList.action?id=${maintainOrder.id}&&type=1"/>",
            datatype: "json",
            height:"200px",
            shrinkToFit:true,//宽度自适应
            rowNum: 1000,
            colNames: ['id', '工单名称','工单编号', '申请人', '申请时间', '原因', '类型'],
            colModel: [
                {name: 'id', index: 'id', width: 100, align: "center",sortable: false},
                {name: 'name', index: 'name', width: 300, align: "center",sortable: false},
                {name: 'code', index: 'code', width: 300, align: "center",sortable: false},
                {name: 'applyUser', index: 'applyUser', width: 200, align: "center",sortable: false},
                {name: 'applyDate', index: 'applyDate', width: 300, align: "center",sortable: false},
                {name: 'reason', index: 'reason', width: 200, align: "center",sortable: false},
                {name: 'applyType', index: 'applyType', width: 200, align: "center",sortable: false},
            ],
            ajaxSuccess: function (data) {

            }
        });
        $("#auditOrderRecord").jqGrid({
            url: "<c:url value="/web/admin/maintainOrder/applyOrderList.action?id=${maintainOrder.id}&&type=2"/>",
            datatype: "json",
            shrinkToFit:true,//宽度自适应
            height:"200px",
            rowNum: 1000,
            colNames: ['id', '工单名称','工单编号', '审核人', '审核时间','审核结果', '原因', '类型', '当前审核等级'],
            colModel: [
                {name: 'id', index: 'id', width: 100, align: "center",sortable: false},
                {name: 'name', index: 'name', width: 200, align: "center",sortable: false},
                {name: 'code', index: 'code', width: 200, align: "center",sortable: false},
                {name: 'auditUser', index: 'applyUser', width: 200, align: "center",sortable: false},
                {name: 'auditDate', index: 'applyDate', width: 200, align: "center",sortable: false},
                {name: 'result', index: 'result', width: 200, align: "center",sortable: false},
                {name: 'reason', index: 'reason', width: 200, align: "center",sortable: false},
                {name: 'auditType', index: 'applyType', width: 200, align: "center",sortable: false},
                {name: 'level', index: 'level', width: 100, align: "center",sortable: false},
            ],
            ajaxSuccess: function (data) {

            }
        });
        $("#maintainDate").jqGrid({
            url: "<c:url value="/web/admin/maintainOrder/applyOrderList.action?id=${maintainOrder.id}&&type=3"/>",
            datatype: "json",
            shrinkToFit:true,//宽度自适应
            height:"500px",
            rowNum: 1000,
            colNames: ['id', '维保名称', '保养类别', '应用场景', '检查结果', '维保类型', '是否异常', '最大值', '最小值', '单位'],
            colModel: [
                {name: 'id', index: 'id', width: 100, align: "center",sortable: false},
                {name: 'name', index: 'name', width: 200, align: "center",sortable: false},
                {name: 'category', index: 'category', width: 200, align: "center",sortable: false},
                {name: 'applicationName', index: 'applicationName', width: 200, align: "center",sortable: false},
                {name: 'resultText', index: 'result', width: 200, align: "center",sortable: false},
                {name: 'inputTypeEnum', index: 'inputTypeEnum', width: 200, align: "center",sortable: false},
                {name: 'abnormalText', index: 'abnormalText', width: 200, align: "center",sortable: false},
                {name: 'maxNumber', index: 'maxNumber', width: 100, align: "center",sortable: false},
                {name: 'minNumber', index: 'minNumber', width: 100, align: "center",sortable: false},
                {name: 'unit', index: 'unit', width: 100, align: "center",sortable: false},

            ],
            ajaxSuccess: function (data) {

            }
        });
        $("#facilityMaintain").jqGrid({
            url: "<c:url value="/web/admin/maintainOrder/applyOrderList.action?id=${maintainOrder.id}&&type=4"/>",
            datatype: "json",
            shrinkToFit:true,//宽度自适应
            height:"350px",
            rowNum: 1000,
            colNames: ['id', '工艺id', '设备名称', '设备编号', '工艺名称', '规格型号','安全要求', '设备类型'],
            colModel: [
                {name: 'id', index: 'id', width: 100, align: "center",sortable: false},
                {name: 'maintainId', index: 'maintainId', hidden: true, width: 200, align: "center",sortable: false},
                {name: 'facilityName', index: 'facilityName', width: 200, align: "center",sortable: false},
                {name: 'facilityCode', index: 'facilityCode', width: 300, align: "center",sortable: false},
                {name: 'maintainName', index: 'maintainName', width: 200, align: "center",sortable: false},
                {name: 'spec', index: 'spec', width: 300, align: "center",sortable: false},
                {name: 'safety', index: 'safety', width: 300, align: "center",sortable: false},
                {name: 'facilityCatName', index: 'facilityCatName', width: 200, align: "center",sortable: false},
            ],
            ajaxSuccess: function (data) {

            }
        });
    });
</script>
</html>
